<template>
    <div class="app-container">
        <el-table :key="tableKey" v-loading="listLoading" :data="fans_list" border fit highlight-current-row style="width: 100%">
            <el-table-column label="ID" prop="fid" sortable="custom" align="center" width="80">
                <template slot-scope="{ row }">
                    <span>{{ row.fid }}</span>
                </template>
            </el-table-column>
            <el-table-column label="平台" prop="platform" align="center" width="150">
                <template slot-scope="{ row }">
                    <span>{{ trans_platform(row.platform) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="openid" prop="openid" align="center" width="250">
                <template slot-scope="{ row }">
                    <span>{{ row.openid ? row.openid : '' }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
                <!-- <template slot-scope="{ row, $index }">
                    <el-button size="mini" type="primary" @click="handleUpdate(row, $index)">
                        {{ $t("table.edit") }}
                    </el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(row, $index)">
                        {{ $t("table.delete") }}
                    </el-button>
                </template> -->
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </div>
</template>

<script>
import { list } from '@/ucenter/api/fans/fans'
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

export default {
    components: { Pagination },
    data() {
        return {
            fans_list: [],
            total: 0,
            tableKey: 0,
            listLoading: false,
            listQuery: {
                page: 1,
                limit: 20,
                importance: undefined,
                title: undefined,
                type: undefined,
                sort: "+id",
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            list().then(res => {
                this.fans_list = res.data.items
                this.total = res.data.total
            })
        },
        trans_platform(platform) {
            if(platform == 'mp') {
                return '公众号'
            } else if (platform == 'miniapp') {
                return '微信小程序'
            }
            return ''
        }
    }
}
</script>